<template>
  <div class="hello">
    <el-card>
      <el-table
        :data="
          tableData.slice(
            (this.currentPage - 1) * this.pagesize,
            this.currentPage * this.pagesize
          )
        "
        width="100%"
        :height="tableHeight"
        stripe
      >
        <el-table-column
          prop="author"
          label="作者"
          width="120"
          fixed
          style="display:none"
        >
          <template slot-scope="scope">
            <span style="color:blue"> {{ scope.row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="algo_name"
          label="策略名"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.algo_name }}
          </template>
        </el-table-column>
        <el-table-column
          prop="trans_count"
          label="交易次数"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span style="color:red">{{ scope.row.trans_count }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="wined_percent"
          label="胜率"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.wined_percent }}
          </template>
        </el-table-column>
        <el-table-column
          prop="gained_percent"
          label="收益率"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.gained_percent }}
          </template>
        </el-table-column>
        <el-table-column
          prop="max_drawback_ratio"
          label="最大回撤"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span style="color:red"> {{ scope.row.max_drawback_ratio }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="得分" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.score }}
          </template>
        </el-table-column>
        <el-table-column
          prop="period_type"
          label="策略周期"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.period_type }}
          </template>
        </el-table-column>
        <el-table-column
          prop="param_name"
          label="参数名称"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.param_name }}
          </template>
        </el-table-column>
        <el-table-column
          prop="begin_time"
          label="开始时间"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            {{ (scope.row.begin_time * 1000) | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column
          prop="end_time"
          label="结束时间"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            {{ (scope.row.end_time * 1000) | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column
          prop="created_time"
          label="创建时间"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            {{ (scope.row.created_time * 1000) | dateFormat }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //    分页
      currentPage: 1,
      pagesize: 10,
      total: 10,
      tableHeight: 0
    }
  },
  computed: {
    tableData() {
      return this.$store.state.data4
    }
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    towNumber(val) {
      return Number(val).toFixed(2)
    }
  },
  created() {
    // 3. 动态计算表格高度
    const windowHeight =
      document.documentElement.clientHeight || document.body.clientHeight
    // 此处减去100即为当前屏幕内除了表格高度以外其它内容的总高度，
    this.tableHeight = windowHeight - 150
  }
}
</script>

<style Lang="less" scoped></style>
